<template>
	<view class="index-container">
    <!-- 搜索组件 S-->
    		<mySearch v-if="searchShow"></mySearch>
    		<!-- 搜索组件 E-->
		<!-- 轮播图 S -->
        <swiper class="banner">
            <swiper-item  v-for="item in banner" :key="item.id">
            	<navigator url="/pkgGood/detail/detail?id=item.goods_id">
            	    	<image class="img" mode="widthFix" :src="item.image_url"></image>
            	</navigator>
            </swiper-item>
        </swiper>
        <!-- 轮播图 E -->
        <u-grid :border="false" col="5">
           <u-grid-item v-for="item in channel" :key="item.id" @click="goCate">
               <image class="menuImg" mode="widthFix" :src="item.icon_url"></image>
               <text class="menuText">{{item.name}}</text>
           </u-grid-item>
        </u-grid>
        <!-- 菜单区域 E -->
        <!-- 通知组件 S -->
        <u-notice-bar :text="notice"></u-notice-bar>
        <!-- 通知组件 E-->
       <!-- 商品分类 S -->
      <!-- 商品分类 S -->
      <view class="goodContainer" v-for="item in categoryList" :key="item.id">
          <view class="titleBox" @click="goCate">
          	<text>{{item.name}}</text>
          </view>
          <!-- 商品列表 S-->
          <goodList :list="item.goodsList"></goodList>
          <!-- 商品列表 E-->
      </view>
      <!-- 商品分类 E -->
    </view>
</template>
<script>
	export default {
		name:'Index',
		data() {
			return {
				// 1. 定义相关数据变量
				banner:[],
				categoryList:[],
				channel:[],
				notice:'',
        searchShow:true
			}
		},
		onShow() {
       this.getIndexData()
    },
    onHide() {
      this.searchShow=false
    },
		methods: {
      async getIndexData(){
      // 2.1 请求数据
      let  res = await uni.$http.get('/index/appInfo')
      console.log(res);
      this.banner = res.banner
      this.channel = res.channel
      this.categoryList = res.categoryList
      this.notice = res.notice.map((item,index)=>{
        return (index+1)+'.'+item.content+' '
      }).join('')
      },
      goCate(){
         uni.switchTab({
           url:'/pages/cate/cate'
         })
       }
    }
	}
</script>
<style lang="scss" scoped>
  .banner{
  	.img{
  		width: 100%;
  	}
  }
  .menuImg{
  	width: 80rpx;
  }
  .menuText {
  	color: #888;
  }
  .titleBox{
  	margin: 10rpx 0;
  	background-color: #fafafa;
  	padding: 20rpx 0;
  	box-sizing: border-box;
  	text-align: center;
  	text{
  		display: inline-block;
  		border-bottom: 4rpx solid #409eff;
  		color: #333;
  		font-size: 28rpx;
  	}
  }
  .goodContainer{
  	padding: 0 20rpx;
  }
</style>